// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend({
    'noPrint': '.no-print'
  }, options);

  if ((typeof dom) === "string") {
    this.dom = document.querySelector(dom);
  } else {
    this.isDOM(dom)
    this.dom = this.isDOM(dom) ? dom : dom.$el;
  }

  this.init();
};
Print.prototype = {
  init: function () {
    var content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend: function (obj, obj2) {
    for (var k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },

  getStyle: function () {
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    str += "<style>html,body{background:#fff;}html,body,div{height: auto!important;font-size:14px;}</style>";
    str += "<style>#print{display:block!important;}.el-form-item__content{min-height:37px;}</style>"
    str += "<style>.printTable,.printForm .detailList{width:100%!important;}.tol{display:none!important;}</style>"
    str += "<style>.detailList{column-count: 2;column-gap: 10px;width: 100%;}.detailList li{break-inside:avoid;}</style>"
    str += "<style>.approvalRecord{width:100%!important;}.actTaskLeft .wrap .el-select__tags{position: unset!important;top: auto!important;transform: none!important;} .el-icon-close, .el-icon-rank{display:none!important;} .printForm .wrap .el-input .el-input__inner{border: 0!important}</style>"
    str += "<style>.el-table table{table-layout: fixed;border-collapse:collapse;} .el-table table tr td,th {white-space:normal;word-break:break-all;}</style>"
    str += "<style>.list-table{padding:0;}.handleCol{display:none;width: 0px !important;}.el-table{border: 1px solid #dfe6ec;}</style>"
    str += `<style>
            .actTaskLeft{
              height: auto;
              border: 0 !important;
              padding: 0 !important;
            }
            .no-print{
              display:none!important;
            }
            .is-print{
              display:block!important;
            }
            .charge-title{
              padding: 10px 0 10px!Important;
            }
            .printForm pre {font-family: unset; font-size: unset;}
            .printForm .el-input__suffix, .printForm .el-input__icon {display: none;}
            .printForm .el-select {display: block;width: auto;}
            .printForm .el-input__inner {
                border: 0;
                padding: 0;
                height: 24px;
                font-size: 13px;
                text-align: left;
                display: block !important;
                width: 100% !important;
                background-color: transparent !important;
            }
            .printForm .el-cascader--medium {
                line-height: normal;
            }
            .printForm .el-table {
              width: 100% !important;
            }
            .printForm .el-table .el-table__header,.printForm .el-table .el-table__empty-block {
                width: 100% !important;
                table-layout: unset;
            }
            .printForm .el-table .el-table__body {
                width: 100% !important;
                padding-right: 1px;
                border-bottom: 1px solid #dfe6ec;
            }
            .printForm .el-table .el-input__inner {
                text-align: center !important;
            }
            .printForm .el-table .el-date-editor.el-input {
                width: 100% !important;
            }
            .printForm .printTable {
                margin-bottom: 10px;
                border: 1px solid #dfe6ec;
                // width: calc(100% - 30px);
                border-collapse: collapse;
                table-layout: fixed;
            }
            .printForm .printTable tr td {
                padding: 5px 10px;
                line-height: 25px;
                border-left: 1px solid #dfe6ec;
                border-bottom: 1px solid #dfe6ec;
                font-size: 13px;
                color: #606266;
                word-break: break-all;
                white-space: normal;
            }
            .printForm .printTable tr td .el-input__inner {
                text-align: left;
                display: block;
            }
            .printForm .printTable tr td pre {
                word-break: break-all;
                white-space: normal;
            }
            .printForm .printTable tr td[colspan='3'] {
                word-break: break-all;
                white-space: normal;
            }
            .printForm .printTable tr .tit {
                color: #555 !important;
                background-color: #f6f7fb !important;
                font-weight: 600;
                width: 20%;
            }
            .printForm .detailList {
                column-count: 2;
                column-gap: 10px;
                // width: calc(100% - 30px);
            }
            .printForm .detailList li {
                break-inside: avoid;
                border-bottom: 0;
                border-top: 3px solid #46a6ff;
            }
            .printForm .detailList li:first-child {
                margin-top: 0;
            }
            .printForm .detailList li .divBor {
                border: 1px solid #dfe6ec;
                border-bottom: 0;
                display: flex;
                padding: 6px 10px;
            }
            .printForm .detailList li .divBor:last-child {
                border-bottom: 1px solid #dfe6ec;
            }
            .printForm .detailList li .divBor:first-child {
                border-top: 0;
            }
            .printForm .detailList li .divBor .linka {
                color: blue;
            }
            .printForm .detailList li .divBor p {
                line-height: 25px;
                font-size: 13px;
            }
            .printForm .detailList li .divBor p div {
                width: 100% !important;
            }
            .printForm .detailList li .divBor p div:first-child {
                color: #555;
                font-weight: 600;
                margin-right: 10px;
                min-width: 35px;
            }
            .printForm .detailList li .divBor p div:last-child {
                text-align: left;
            }
            .printForm .detailList p {
                margin: 0;
            }
            ul {
              margin: 0;
              padding: 0;
            }
            .approvalRecord {
              margin-bottom: 20px;
              border: 1px solid #dfe6ec;
            }
            .area-header{
              margin: 10px 0;
            }
            .approvalRecord .colspan {
                padding: 0 10px !important;
                background: #f6f7fb !important;
                border-top: 0 !important;
            }
    
            .approvalRecord .colspan .tit {
                margin: 6px 0 !important;
            }
    
            .approvalRecord .colspan .content {
                padding: 0 !important;
            }
    
            .approvalRecord li {
                display: flex;
                border-top: 1px solid #dfe6ec;
            }
    
            .approvalRecord li .user {
                min-width: 170px;
                width: 170px;
                border-right: 1px solid #dfe6ec;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
            }
    
            .approvalRecord li .user i {
                font-size: 13px;
                font-style: normal;
                display: block;
                line-height: 20px;
                width: 100%;
                text-align: center;
            }
    
            .approvalRecord li .content {
                width: 100%;
                padding: 10px;
            }
    
            .approvalRecord li .content .tit {
                font-weight: bold;
                margin: 10px 0;
                font-size: 13px;
                line-height: 25px;
                color: #555;
                display: block;
            }
    
            .approvalRecord li .content .contentTit {
                margin: 0 !important;
                word-break: break-all;
            }
    
            .approvalRecord li .content .test {
                color: #909399;
                margin: 0;
                font-size: 13px;
                line-height: 25px;
            }
    
            .approvalRecord li .content .test i {
                margin: 0 10px;
            }
    
            .approvalRecord li .content .test .link_a {
                margin-right: 10px;
            }
    
            .approvalRecord li .content .test span {
                display: inline-flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
            }
    
            .approvalRecord li .content .test span i {
                margin: 0 !important;
                margin-right: 5px !important;
                display:none;
            }
            .previewTable{
              border-collapse: collapse;
              width: 100%;
              border: 1px solid #dfe6ec;
            }
            .previewTable th{
              background-color: #f6f7fb  !important;
              padding: 7px 0;
              color: #555 !important;
              height: 38px;
              font-size: 13px;
              border: 1px solid #dfe6ec;
              border-bottom: 0;
              min-width: 100px;
            }
            .previewTable td{
              border: 1px solid #dfe6ec;
              padding: 11px 6px;
              font-size: 13px;
              text-align: center;
              color: #606266;
              word-break: break-all;
            }
            .printFormTextarea{
              padding: 5px 15px;
              line-height: 1.5;
              font-size: 13px;
              width: 100%;
              color: #606266;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
              word-break: break-all;
            }
            #print .printArea .el-table__fixed-right,#print .printArea .el-table-column--selection{
              display:none;
              width: 0px!important;
            }
            .actTaskForm .el-table__fixed-right,.actTaskForm .el-table-column--selection{
              display:none;
              width: 0px!important;
            }
            .actTaskForm .el-table{
              width: 100%!important;
            }
            #print .canvas{
              display:none;
            }
        </style>`
    return str;
  },

  getHtml: function () {
    var inputs = document.querySelectorAll('input');
    var textareas = document.querySelectorAll('#print .dataForm textarea');
    var selects = document.querySelectorAll('select');
    let cells = document.querySelectorAll('#print .cell');

    for (var k = 0; k < inputs.length; k++) {
      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute('checked', "checked")
        } else {
          inputs[k].removeAttribute('checked')
        }
      } else if (inputs[k].type == "text") {
        inputs[k].setAttribute('value', inputs[k].value)
      } else {
        inputs[k].setAttribute('value', inputs[k].value)
      }
    }

    for (var k2 = 0; k2 < textareas.length; k2++) {
      if (textareas[k2].type == 'textarea' && textareas[k2].value) {
        // textareas[k2].innerHTML = textareas[k2].value
        textareas[k2].outerHTML = '<div class="printFormTextarea">' + textareas[k2].value.replaceAll('\r', '<br>').replaceAll('\n', '<br>') + '</div>'
      }
    }

    for (var k3 = 0; k3 < selects.length; k3++) {
      if (selects[k3].type == 'select-one') {
        var child = selects[k3].children;
        for (var i in child) {
          if (child[i].tagName == 'OPTION') {
            if (child[i].selected == true) {
              child[i].setAttribute('selected', "selected")
            } else {
              child[i].removeAttribute('selected')
            }
          }
        }
      }
    }
    const tableNode = document.querySelectorAll('#print .el-table__header,#print .el-table__body');
    //el-table 打印不全的问题
    for (let k6 = 0; k6 < tableNode.length; k6++) {
        const tableItem = tableNode[k6];
        tableItem.style.width = '100%';
        const child = tableItem.childNodes;
        for (let i = 0; i < child.length; i++) {
            const element = child[i];
            if (element.localName === 'colgroup') {
                element.innerHTML = '';
            }
        }
    }
    //el-table 格子里面打印超过格子的问题
    for (let k7 = 0; k7 < cells.length; k7++) {
        const cell = cells[k7];
        cell.style.width = '100%';
        cell.removeAttribute('style')
    }

    return this.dom.outerHTML;
  },

  writeIframe: function (content) {
    var w, doc, iframe = document.createElement('iframe'),
      f = document.body.appendChild(iframe);
    iframe.id = "myIframe";
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
    var _this = this
    iframe.onload = function(){
      _this.toPrint(w);
      setTimeout(function () {
        document.body.removeChild(iframe)
      }, 100)
    }
  },

  toPrint: function (frameWindow) {
    try {
      setTimeout(function () {
        frameWindow.focus();
        try {
          if (!frameWindow.document.execCommand('print', false, null)) {
            frameWindow.print();
          }
        } catch (e) {
          frameWindow.print();
        }
        frameWindow.close();
      }, 10);
    } catch (err) {
      // console.log('err', err);
    }
  },
  isDOM: (typeof HTMLElement === 'object') ?
    function (obj) {
      return obj instanceof HTMLElement;
    } :
    function (obj) {
      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  // 4. 添加实例方法
  Vue.prototype.$print = Print
}
export default MyPlugin
